/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-09-28 08:45:56
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-12-16 17:22:58
 * @FilePath: \adminstration\src\Pages\Front\Common\Other\SmallTitle.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const SmallTitle = ({
    children,
    className,
    direction,
    flex,
    title,
    style,
    type,
    height,
    imgOne,
    imgThr,
    text,
    background,
}) => {
    return (
        <div className={`SmallTitle ${type}`} style={{ flex, ...style }}>
            <div className="title" style={{ height }}>
                <div>
                    <img style={{ width: imgOne }} src={`${imageUrl}01.png`} alt="" />
                    <img src={`${imageUrl}02.png`} alt="" />
                    <img style={{ width: imgThr }} src={`${imageUrl}03.png`} alt="" />
                </div>
                <div style={text}>{title}</div>
            </div>
            <div className={`content ${className || ''}`} style={{ background }}>
                {children}
            </div>
        </div>
    )
}

export const SmallTitleStone = ({ children, className, flex, title, style, type }) => {
    return (
        <div className={`SmallTitleStone`} style={{ flex, ...style }}>
            <div className="title" style={type === 1 ? { height: 29 } : { height: 24 }}>
                <div>
                    {type === 1 ? (
                        <>
                            <img style={{ width: 82 }} src={`${imageUrl}1.png`} alt="" />
                            <img src={`${imageUrl}2.png`} alt="" />
                        </>
                    ) : (
                        <>
                            <img style={{ width: 210 }} src={`${imageUrl}01.png`} alt="" />
                            <img src={`${imageUrl}02.png`} alt="" />
                        </>
                    )}
                </div>
                <div className={`${type === 1 ? 'item' : 'home'}`}>{title}</div>
            </div>
            <div className={`content ${className || ''}`}>{children}</div>
        </div>
    )
}

// 通用小标题
export const CommonSmallTitle = ({ children, className, flex, style, title, type }) => (
    <div className={className} style={{ flex, ...style }}>
        <div className="Title">
            <div>
                <img src={`${imageUrl}${type === 1 ? '11.png' : '01.png'}`} alt="" />
                <img src={`${imageUrl}${type === 1 ? '12.png' : '02.png'}`} alt="" />
                <img src={`${imageUrl}${type === 1 ? '13.png' : '03.png'}`} alt="" />
            </div>
            <div>{title}</div>
        </div>
        <div className="children">{children}</div>
    </div>
)

// 通用小标题2
export const CommonSmallTitleTwo = ({ children, className, flex, style, title }) => (
    <div className={className} style={{ flex, ...style }}>
        <div className="Title">
            <div>
                <img src={`${imageUrl}11.png`} alt="" />
                <img src={`${imageUrl}12.png`} alt="" />
                <img src={`${imageUrl}13.png`} alt="" />
            </div>
            <div>{title}</div>
        </div>
        <div className="children">{children}</div>
    </div>
)
